<template>
	<div class="dashboard-container">
		<el-card class="welcome-card">
			<h2 style="font-size: 33px">欢迎使用光狼游戏管理平台</h2>
			<div class="platform-header">
				<div class="logo-container">
					<img src="/gameLogo.png" alt="光狼游戏管理平台" class="platform-logo" />
				</div>
				<div class="platform-title">
					<h1>光狼游戏管理平台</h1>
					<p class="subtitle">——专业、安全、高效的数字化游戏管理解决方案</p>
				</div>
			</div>
		</el-card>

		<el-card class="intro-card">
			<div class="platform-intro">
				<p class="intro-text">
					由光狼网络科技有限公司自主研发的 光狼游戏管理平台，是面向游戏开发者、运营商及生态合作伙伴的一站式综合管理系统。平台深度融合网络技术服务与信息安全技术，提供从游戏接入、数据监控、用户管理到风险控制的闭环服务，赋能游戏业务的智能化运营与合规化管理。
				</p>
			</div>
		</el-card>

		<el-card class="features-card">
			<h2>平台核心能力</h2>
			<div class="features-grid">
				<div class="feature-item">
					<el-icon class="feature-icon"><Check /></el-icon>
					<div class="feature-content">
						<h3>全生命周期管理</h3>
						<p>覆盖游戏资源管理，实现精细化运营。</p>
					</div>
				</div>
				<div class="feature-item">
					<el-icon class="feature-icon"><Check /></el-icon>
					<div class="feature-content">
						<h3>开发者生态支持</h3>
						<p>开放API接口与SDK工具链，支持快速接入、自定义功能扩展及第三方服务协同。</p>
					</div>
				</div>
			</div>
		</el-card>

		<el-card class="copyright-card">
			<h2>权属声明</h2>
			<p class="copyright-text">
				本平台所有功能设计、数据逻辑及管理规则，其知识产权与最终解释权均归属_光狼网络科技有限公司_独家所有。任何组织或个人对平台的使用、修改及二次开发，均须遵循平台官方授权协议。
			</p>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import { Check } from '@element-plus/icons-vue'
</script>

<style lang="scss" scoped>
.dashboard-container {
	padding: 20px;
	max-width: 1200px;
	margin: 0 auto;
	animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.welcome-card {
	margin-bottom: 20px;
	background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease;
	
	&:hover {
		transform: translateY(-5px);
	}
}

.platform-header {
	display: flex;
	align-items: center;
	gap: 30px;
	padding: 30px;
}

.logo-container {
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
	border-radius: 50%;
	padding: 15px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	
	.platform-logo {
		width: 100%;
		height: 100%;
		object-fit: contain;
		transition: transform 0.5s ease;
		
		&:hover {
			transform: scale(1.1) rotate(5deg);
		}
	}
}

.platform-title {
	h1 {
		font-size: 32px;
		color: #303133;
		margin: 0 0 15px 0;
		font-weight: 600;
		background: linear-gradient(45deg, #409EFF, #36D1DC);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.subtitle {
		font-size: 16px;
		color: #606266;
		margin: 0;
		line-height: 1.6;
	}
}

.intro-card {
	margin-bottom: 20px;
	border-radius: 12px;
	background: white;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	
	.intro-text {
		font-size: 16px;
		line-height: 1.8;
		color: #606266;
		text-align: justify;
		padding: 25px;
		position: relative;
		
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 4px;
			height: 100%;
			background: linear-gradient(to bottom, #409EFF, #36D1DC);
			border-radius: 2px;
		}
	}
}

.features-card {
	margin-bottom: 20px;
	border-radius: 12px;
	background: white;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	
	h2 {
		font-size: 24px;
		color: #303133;
		margin: 25px 25px 20px;
		font-weight: 600;
	}
}

.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	padding: 0 20px 20px;
}

.feature-item {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 25px;
	background: #f8f9fa;
	border-radius: 12px;
	transition: all 0.3s ease;
	border: 1px solid #ebeef5;
	
	&:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
		background: white;
	}
	
	.feature-icon {
		font-size: 28px;
		color: #409EFF;
		margin-top: 5px;
		transition: transform 0.3s ease;
	}
	
	&:hover .feature-icon {
		transform: scale(1.2);
	}
	
	.feature-content {
		h3 {
			font-size: 20px;
			color: #303133;
			margin: 0 0 12px 0;
			font-weight: 600;
		}
		
		p {
			font-size: 15px;
			color: #606266;
			margin: 0;
			line-height: 1.6;
		}
	}
}

.copyright-card {
	background: #f8f9fa;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
	
	h2 {
		font-size: 20px;
		color: #303133;
		margin: 25px 25px 15px;
		font-weight: 600;
	}
	
	.copyright-text {
		font-size: 14px;
		color: #606266;
		line-height: 1.8;
		padding: 0 25px 25px;
	}
}

@media screen and (max-width: 768px) {
	.platform-header {
		flex-direction: column;
		text-align: center;
		padding: 20px;
	}
	
	.logo-container {
		width: 100px;
		height: 100px;
		margin: 0 auto;
	}
	
	.platform-title h1 {
		font-size: 24px;
	}
	
	.features-grid {
		grid-template-columns: 1fr;
	}
	
	.intro-text {
		padding: 20px !important;
	}
}
</style>
